<template>
  <div>
        <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="(v,i) in this.$route.meta.arr" :key="i">{{v}}</el-breadcrumb-item>
      </el-breadcrumb>
      
       <h1>form表单方式上传图片</h1>
            <!-- 表单上传需要加enctype这个属性 -->
      <form action="http://localhost:3000/img/upload" method="post" enctype="multipart/form-data">
                <!-- name是要传的图片的key -->
             <input type="file" name="logo" />
             <input type="submit" value="form上传图片提交">
      </form>

        <h1>axios方式提交图片</h1>

      <input type="file" ref="demo" />
      <button @click="fun()">点我上传图片</button>
  </div>
</template>

<script>

import {imglink} from "@/api/imgapi.js"
export default {
  name: "HtDemod",


  data() {
    return {};
  },

  mounted() {},

  methods: {
        fun(){
            // 需要找到图片并且转换成数据流
            let imgfile=this.$refs.demo.files[0]
            var formdata=new FormData()//创建出formdata对象（异步上传文件）
            formdata.append("logo",imgfile)//添加上传文件的key 和后台接受的key要相同 el就是当前得到的图片 
            imglink("/api/img/upload",formdata).then((ok)=>{
                console.log(ok)
            })
        }
  },
};
</script>

<style lang="scss" scoped>
</style>